<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favico.ico">
    <title>预约须知</title>
            <link rel="stylesheet" href="../css/page-health-orderNotice.css" />
    <script src="../plugins/jquery/dist/jquery.min.js"></script>
    <script src="../plugins/healthmobile.js"></script>
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/vue/axios-0.18.0.js"></script>
    <script src="../plugins/qrcode.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <!-- 引入组件库 -->
    <script src="../plugins/elementui/index.js"></script>
    <link rel="stylesheet" href="../css/page-health-index.css" />
    <link rel="stylesheet" href="../css/page-health-login-pay.css" />
    <script>
        var id = getUrlParam("id");
    </script>
    <style>
        #qrCode{
            height: 280px;
            width: 280px;
            margin: 50px auto;
        }
        #timer{
            width: 300px;
            margin: 50px auto;
            font-size: 25px;
        }
    </style>
    <style>
        .verify_box{
            width: 400px;
            height: 60px;
            background: #e9e6e9;
            position: relative;
        }
        .verify_box p{
            position: absolute;
            top:-20%;
            left: 45%;
            z-index: 5;
        }
        .shadow {
            position: absolute;
            height: 60px;
            background: #F56C6C;
        }
        .verify_core{
            background: #fff;
            border: 1px solid #adadc2;
            width: 60px;
            height: 60px;
            box-sizing: border-box;
            position: absolute;
            z-index: 20;
            background-image: url('../plugins/img/b.jpg');
            background-size: 100% 100%;
        }
        .verify_core img{
            width: 30px;
            height: 30px;
            margin: 5px auto;
            display: block;
        }
    </style>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app" class="app" >
    <!-- 页面头部 -->
    <div class="top-header">
        <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
        <span class="center">传智健康</span>
        <span class="f-right"><i class="icon-more"></i></span>
    </div>
    <!-- 页面内容 -->
    <div class="contentBox">
        <div class="notice-article">
            <div class="info-title">
                <span class="name" style="font-size: 20px">体检预约支付</span>
            </div>
            <div class="notice-item">
                <div class="item-title" style="font-size: 20px">预约信息</div>
                <div class="item-content">
                    <p style="font-size: 26px">体检人：{{orderInfo.member}}</p>
                    <p style="font-size: 18px">体检套餐：{{orderInfo.setmeal}}</p>
                    <p style="font-size: 18px">体检日期：{{orderInfo.orderDate}}</p>
                    <p style="font-size: 18px">预约类型：{{orderInfo.orderType}}</p>
                    <p style="font-size: 18px">套餐价格：{{orderInfo.price}}</p>
                </div>
            </div>
            <div style="font-size: 20px"><i class="el-icon-loading"></i><span>确认预约信息，请滑动滑块去支付</span></div>
            <center><div class="verify_box">
                <!-- 滑块 -->
                <div class="verify_core"></div>
                <p></p>
                <!-- 被滑过的部分 -->
                <div class="shadow"></div>
            </div></center>
            <div class="notice-item">
                <div class="item-title" style="font-size: 20px"><i class="el-icon-warning"></i>注意事项</div>
                <div class="item-content" >
                    <p style="font-size: 18px">1、体检前三天饮食不宜有太大变化，尽量保证清淡饮食，避免油腻、过甜、过咸的食物，避免饮食不均暴饮暴食，以免影响检查结果。</p>
                    <p style="font-size: 18px">2、体检前要注意好好休息，尽量不要做剧烈运动以及情绪也不宜激动，要保证充足的睡眠时间，调整好自己的身体状态。</p>
                    <p style="font-size: 18px">3、体检前不要饮酒，酒精会影响到检查的准确性，如导致甘油三酯、转氨酶等检查结果出现异常，干扰到很多检查项目。</p>
                    <p style="font-size: 18px">4、体检当天应该保证穿着轻便、简单，另外女士要注意不要穿连裙、连裤袜，以及不要佩戴饰品等，以免影响检查。</p>
                    <p style="font-size: 18px">5、女士朋友要注意避开经期，以防经期影响到相关的检查项目。</p>
                    <p style="font-size: 18px">6、如果有前列腺或妇科B超检查，需要憋尿，检前可以适当饮水，以保证膀胱充盈后再进行检查。</p>
                    <p style="font-size: 18px">7、如果有妇科检查，要注意检前不宜进行夫妻生活，夫妻生活会影响到阴道检查，干扰检查的结果。</p>
                    <p style="font-size: 18px">8、做妇科检查前也不宜过度清洁，不宜使用阴道药物，避免过度清洁或是药物干扰，影响到检查的结果。</p>
                    <p style="font-size: 18px">9、积极配合医师的检查，保持良好的心态，告知医师自己的真实情况，有助于医师帮助判断身体健康状况。</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            orderInfo: {},
        },
        created() {
            axios.get("/order/findOrderInfoById/" + id).then((res) => {
                if (res.data.flag) {
                    console.log(res.data.data)
                    this.orderInfo = res.data.data
                }
            })
        },
        methods:{
        }
    });
</script>
<script>
    var verify_box = document.querySelector('.verify_box');
    var text = verify_box.querySelector('p');
    var shadow = verify_box.querySelector('.shadow');
    var verify_core = verify_box.querySelector('.verify_core');
    var isSuccess = false;   //检查是否成功
    verify_core.onmousedown = function(event) {   //按下滑块
        var e = event || window.event;
        var downX = e.clientX;
        verify_core.onmousemove = function(event) {     //移动滑块
            var moveX = event.clientX - downX;
            if(moveX > 0) {
                shadow.style.width = moveX + 'px';
                this.style.left =  moveX + 'px';
                if(moveX >= (verify_box.offsetWidth - this.offsetWidth)) {
                    text.innerText = "去支付";
                    isSuccess = true;
                    verify_core.style.backgroundImage = "url('./true.png')";
                    this.onmousemove = null;   //当通过时，清除鼠标移动事件
                    this.onmousedown = null;    //当通过时，清除鼠标按下事件
                }
            }

        }
    }

    verify_core.onmouseup = function(event) {
        this.onmousemove = null;
        if(isSuccess) {
            window.location.href="pay.html?id="+id
        };   //如果成功，直接退出
        this.style.left = 0;
        shadow.style.width = 0;
    }
</script>
</html>
